<script>
const app = getApp();
export default {
  name: "gf-orders",
  props: {
    gfOrderList: {
      type: Array,
      default: [],
    },
    showAsk: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      imgurlBwc: app.globalData.imgurlBwc,

      order_id: "",
      more: false,

      order_item: {
        package: {
          images: []
        },
        shop: {
          name: ''
        },
        package_name: ''
      },
      goodsImage: [],//页面大图的ref索引

    }
  },
  mounted() {

  },
  methods: {
    // 自主核销
    toUse(item){
      let that = this
      uni.showModal({
        title: '提示',
        content: '确定您已到店并需自主核销，核销后代表该订单您已消费；不可退款。如未消费请取消；避免售后问题。',
        confirmColor: '#FF4910',
        cancelText: '取消核销',
        confirmText: '确定核销',
        success: function (res) {
          if (res.confirm) {
            //console.log('用户点击确定');
            that.$api.TDheyanmoniOrder({
              order_id: item.id
            }).then(resss => {
              let currentPage = 1
              that.$emit('Getorders', currentPage)
            }).catch(err => {
              uni.showToast({
                title: err.data.msg,
                icon: 'none',
                duration: 2000
              });
            })
          } else if (res.cancel) {
            //console.log('用户点击取消');
          }
        }
      });
    },
    // 订单更多操作
    clickMore(item) {
      if (item.status == 1) {
        this.quxiao(item)
      } else {
        this.tuikuan(item)
      }
    },
    setMore(item) {
      if (this.order_item.id !== item.id) {
        this.order_item.check_time = 2
        item.check_time = 1
        // console.log("11111111111111111111111", item)
      } else {
        if (item.check_time == 1) {
          item.check_time = 2
        } else {
          item.check_time = 1
        }
        // console.log("222222222222222222222", item)
      }
      this.order_item = item
      // console.log("setMore1", item)
      // this.orderList[index].more =  !this.orderList[index].more
      // this.orderList.push()
      // item.more = !item.more
      // console.log("setMore",item)
    },
    // 取消订单
    quxiao(data) {
      let that = this
      data.check_time = 2
      that.order_item = data
      that.order_id = data.id
      this.$emit('quxiao', that.order_id)
      /* uni.showModal({
        title: '提示',
        content: '是否要取消此订单?',
        confirmColor: '#FF4910',
        success: function (res) {
          if (res.confirm) {
            //console.log('用户点击确定');
            that.$api.TDquxiaoOrder({
              order_id: data.id
            }).then(resss => {
              that.Getorders()
            }).catch(err => {
              uni.showToast({
                title: err.data.msg,
                icon: 'none',
                duration: 2000
              });
            })
          } else if (res.cancel) {
            //console.log('用户点击取消');
          }
        }
      }); */
    },
    // 用户退款
    tuikuan(data) {
      let that = this
      data.check_time = 2
      uni.showModal({
        title: '提示',
        content: '是否要操作退款?',
        confirmColor: '#FF4910',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定', data);
            that.$api.TDtuikuanOrder({
              order_id: data.id
            }).then(resss => {
              uni.showToast({
                title: '退款成功',
                icon: 'none',
                duration: 2000
              })
              let currentPage = 1
              that.$emit('Getorders', currentPage)
            }).catch(err => {
              uni.showToast({
                title: err.data.msg,
                icon: 'none',
                duration: 2000
              });
            })
          } else if (res.cancel) {
            //console.log('用户点击取消');
          }
        }
      });
    },
    // 上传笔记、重新上传笔记
    toUploadNote(res) {
      uni.navigateTo({
        url: '/sub_account/pages/upload_note?data=' + encodeURIComponent(JSON.stringify(res)) +  '&source=order'
      })
    },
    Daohang() {
      console.log("Daohang==",  this.order_item.shop.name)
      wx.openLocation({
        latitude: Number(this.order_item.shop.latitude),
        longitude: Number(this.order_item.shop.longitude),
        scale: 18,
        name: this.order_item.shop.name,
        address: this.order_item.shop.address
      });
    },
    packageimage(data) {
      return data[0]
    },

    // 订单详情
    ToTDDetails(item) {
      uni.navigateTo({
        url: '/subpackageA/pages/TanDianProcess/TanDianProcess?data=' + encodeURIComponent(JSON.stringify(item))
      })
    },
    // 笔记要求详情弹窗
    detail(data) {
      let that = this
      console.log('笔记详情', data)
      that.order_item = data
      that.showAsk = true

    },

    // 进入美团官返店铺
    goGFShop(data){
      // console.log('进入店铺=',  data)
      let actionUrl = {
        wxAppid: data.wxAppid,
        wxPath: data.wxPath
      }
      uni.openEmbeddedMiniProgram({
        appId: actionUrl.wxAppid,
        path: actionUrl.wxPath,
        success: function (res) {
          console.log(res)
        },
        fail: function (res) {
          console.log(res)
        }
      })
    },
    // 官返美团订单评价
    goEvaluate(data){
      let actionUrl = {
        wxAppid: data.wxAppid,
        wxPath: data.wxPath
      }
      uni.openEmbeddedMiniProgram({
        appId: actionUrl.wxAppid,
        path: actionUrl.wxPath,
        success: function (res) {
          console.log(res)
        },
        fail: function (res) {
          console.log(res)
        }
      })
    },
    // 取消美团官返报名
    cancelOrderFun(data){
      let that = this
      uni.showModal({
        title: '取消美团官返报名',
        content: '确定要取消美团官返报名订单吗？',
        cancelColor: '#999',
        confirmColor: '#FF7900',
        success: res => {
          if (res.confirm) {
            that.$api.getCancelOfficialActivityAPI({
              userEventId: data.userEventId
            }).then(rees => {
              uni.showToast({
                title: '取消成功',
                icon: 'none',
                duration: 2000
              })
              setTimeout(() => {
                let currentPage = 1
                this.$emit('childGetFun', currentPage)
              }, 1000)
            }).catch(err => {
              uni.showToast({
                title: err.data.msg,
                icon: 'none',
                duration: 2000
              })
            })
          }
        }
      })
    },
    // 复制订单号
    copy_no(order_no) {
      uni.setClipboardData({
        data: order_no, // e是你要保存的内容
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      });
    },
    //倒计时计算
    findcountdown(item) {
      const now = new Date().getTime();
      let createTime = new Date(item.create_time).getTime() + 30*60*1000
      // console.log('结束时间', now, createTime)
      let isend = createTime - now > 0 ? (createTime - now) : 0;
      let seconds = this.$moment(isend).unix();
      return seconds
    },
    // 倒计时结束后执行
    countDownEndFun(data){
      console.log('倒计时结束')
      // 倒计时结束后默认执行取消订单
      that.$api.getCancelOfficialActivityAPI({
        userEventId: data.id
      }).then(rees => {
        uni.showToast({
          title: '过期未报名，订单自动取消',
          icon: 'none',
          duration: 2000
        })
      })
      setTimeout(function () {
        uni.reLaunch({
          url: '/pages/orders/orders_gf'
        })
      }, 1500)


    },

  },
}
</script>

<template>
  <view class="orders-box">
    <view class="order_list_item" v-for="(item,index) in gfOrderList" :key="index">
      <view class="order_title u-flex">
        <view class="shop_title u-flex" @click="copy_no(item.order_no)">
          <text class="text-Omit">订单号：</text>
          <text class="text-Omit">M{{ item.order_no }}</text>
          <image :src="imgurlBwc+'/order/copy@2x.png'" style="margin-left: 10rpx"></image>
        </view>
        <view class="status">
          <!--
            1待付款
            2已付款
            3已核验（等待上传）
            4待审核（已上传）
            5已完成
            -1已取消(超时、自动)
            -2已驳回（审核失败）
            -3已退款（金额原路返回）
          -->
          <text class="color1" v-if="item.code == 3">已报名</text>
          <text class="color1" v-if="item.code == 4">已下单</text>
          <text class="color1" v-if="item.code == 6">任务失败</text>
          <text class="color2" v-if="item.code == 7">已返现</text>
          <text class="color2" v-if="item.code == 99">审核中</text>
          <text class="color2" v-if="item.code == 100">已完成</text>
        </view>
      </view>
      <view v-if="item.code == 3" class="count_down" style="padding-top: 20rpx;font-size: 24rpx;color: #888888;">
        请在
        <u-count-down
            v-if="item.code == 3"
            :timestamp="findcountdown(item)"
            @end="countDownEndFun(item)"
            :show-days="true"
            :show-border="true"
            font-size="24"
            color="#FF402F"
            bgColor="#fff"
            border-color="#ffffff"
            separator="zh"
            separator-size="20"
            separator-color="#FF4E0D">
        </u-count-down>
        <text v-if="item.code == 3">内进店下单，过期报名将自动取消</text>
      </view>
      <view style="padding: 20rpx 0"><u-line color="#F3F3F3"></u-line></view>
      <view class="goods_info u-flex">
        <view class="goods_img" style="width: 160rpx;height: 160rpx;">
          <image :ref="goodsImage[index]" :src="item.picture" mode="aspectFill" style="width: 160rpx;height: 160rpx;"></image>
          <view class="gf_icon">官返</view>
        </view>
        <view class="goods_name">
          <view style="display: flex;">
            <!--<image style="height: 28rpx;width: 28rpx" :src="BestImgUrl+'/index/Frame.png'"></image>-->
            <view class="shop_type">美团</view>
            <text class="shop_name_text ellipsis-two-line">{{ item.shop_name }}</text>
          </view>
          <view style="color: #333333;margin-top: 10rpx">实付金额：<text style="color: #fd5647;">￥{{ item.realCharge ? item.realCharge/100 : 0 }}</text></view>
          <view style="color: #333333;margin-top: 10rpx">返款金额：<text style="color: #fd5647;">￥{{
              item.back_amount ? item.back_amount/100 : item.code == 1 || item.code == 2 || item.code == 3 || (item.code == 6) && (item.is_back == 0) ? "0" : "待结算"
            }}</text></view>
          <view style="font-size: 24rpx;color: #999999;margin-top: 10rpx"> 参与时间：{{ item.create_time }}</view>
        </view>
      </view>
      <view style="background-color: #f9f9f9;font-size: 24rpx;color: #3d3d3d;border-radius: 10rpx;padding: 20rpx;margin-bottom: 20rpx">
        <view>
          <view style="width: 100%;padding:6rpx 0;">减免规则：</view>
          <view style="display: flex;align-items: center;">
            <view>本单返实付的</view>
            <view style="color: #FE874B;font-size: 26rpx;padding-left:6rpx;">{{ Number.isInteger(item.do_ratio/10000 * 100) ? item.do_ratio/10000 * 100 : (item.do_ratio/10000 * 100).toFixed(0) }}%</view>
            <view style="width: 2rpx;height: 30rpx;margin: 0 10rpx;background: #dddddd"></view>
            <view>最高返</view>
            <view style="color: #FE874B;font-size: 26rpx;padding-left:6rpx;">{{ item.max_commission/100 }}元</view>
          </view>
        </view>
        <!--<view style="margin-top: 10rpx;position: relative;">
          <view style="width: 120rpx;">商家要求：</view>
          <view style="font-size: 24rpx;color: #3D3D3D;margin-left: 16rpx;line-height: 40rpx">{{ item.activity_ask }}</view>
        </view>-->
      </view>

      <view class="order_btnzu u-flex">
        <view></view>
        <view class="right_zu u-flex">
          <view class="kongxin" @click="cancelOrderFun(item)" v-if="item.code == 3">取消订单</view>
          <view class="shise" @click="goGFShop(item)" v-if="item.code == 3">进入店铺</view>
          <view class="shise" @click="goEvaluate(item)" v-if="item.code == 4">去评价</view>
        </view>

      </view>
    </view>


  </view>
</template>

<style scoped lang="scss">

</style>